<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Unit Converter</title>
  <style>
    /* Reset default browser styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      color: #333;
      line-height: 1.6;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    h1 {
      text-align: center;
      font-size: 2.5rem;
      margin-bottom: 30px;
      color: #6c5ce7;
    }

    .converter-card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 30px;
    }

    .converter-card select,
    .converter-card input {
      width: 100%;
      padding: 10px;
      font-size: 1rem;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 4px;
    }

    .converter-card button {
      width: 100%;
      padding: 10px;
      background-color: #6c5ce7;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 1.2rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .converter-card button:hover {
      background-color: #5a4ae5;
    }

    /* Responsive design */
    @media (max-width: 768px) {
      .container {
        padding: 20px;
      }
    }
  </style>
</head>

<body>
<div class="container">
  <h1 id="title">Unit Converter</h1>

  <div>
    <label for="language-select">Select Language:</label>
    <select id="language-select" onchange="changeLanguage()">
      <option value="en">English</option>
      <option value="fr">Français</option>
      <option value="ja">日本語</option>
      <option value="zh">中文</option>
      <option value="es">Español</option>
      <option value="de">Deutsch</option>
    </select>
  </div>

  <div class="converter-card">
    <h3 id="length-title">Length Converter</h3>
    <div>
      <label for="length-from" id="length-from-label">From:</label>
      <select id="length-from">
        <option value="meters">Meters</option>
        <option value="kilometers">Kilometers</option>
        <option value="centimeters">Centimeters</option>
        <option value="millimeters">Millimeters</option>
      </select>
    </div>
    <div>
      <label for="length-to" id="length-to-label">To:</label>
      <select id="length-to">
        <option value="meters">Meters</option>
        <option value="kilometers">Kilometers</option>
        <option value="centimeters">Centimeters</option>
        <option value="millimeters">Millimeters</option>
      </select>
    </div>
    <div>
      <label for="length-value" id="length-value-label">Value:</label>
      <input type="number" id="length-value" placeholder="Enter value" />
    </div>
    <button onclick="convertLength()">Convert</button>
    <h4 id="length-result-title">Result: <span id="length-result">0</span></h4>
  </div>

  <div class="converter-card">
    <h3 id="temp-title">Temperature Converter</h3>
    <div>
      <label for="temp-from" id="temp-from-label">From:</label>
      <select id="temp-from">
        <option value="C">Celsius (°C)</option>
        <option value="F">Fahrenheit (°F)</option>
        <option value="K">Kelvin (K)</option>
      </select>
    </div>
    <div>
      <label for="temp-to" id="temp-to-label">To:</label>
      <select id="temp-to">
        <option value="C">Celsius (°C)</option>
        <option value="F">Fahrenheit (°F)</option>
        <option value="K">Kelvin (K)</option>
      </select>
    </div>
    <div>
      <label for="temp-value" id="temp-value-label">Value:</label>
      <input type="number" id="temp-value" placeholder="Enter value" />
    </div>
    <button onclick="convertTemperature()">Convert</button>
    <h4 id="temp-result-title">Result: <span id="temp-result">0</span></h4>
  </div>

</div>

<script>
  const translations = {
    en: {
      title: "Unit Converter",
      lengthTitle: "Length Converter",
      lengthFromLabel: "From:",
      lengthToLabel: "To:",
      lengthValueLabel: "Value:",
      lengthResultTitle: "Result:",
      tempTitle: "Temperature Converter",
      tempFromLabel: "From:",
      tempToLabel: "To:",
      tempValueLabel: "Value:",
      tempResultTitle: "Result:"
    },
    fr: {
      title: "Convertisseur d'unités",
      lengthTitle: "Convertisseur de longueur",
      lengthFromLabel: "De:",
      lengthToLabel: "À:",
      lengthValueLabel: "Valeur:",
      lengthResultTitle: "Résultat:",
      tempTitle: "Convertisseur de température",
      tempFromLabel: "De:",
      tempToLabel: "À:",
      tempValueLabel: "Valeur:",
      tempResultTitle: "Résultat:"
    },
    ja: {
      title: "単位変換器",
      lengthTitle: "長さ変換器",
      lengthFromLabel: "から:",
      lengthToLabel: "へ:",
      lengthValueLabel: "値:",
      lengthResultTitle: "結果:",
      tempTitle: "温度変換器",
      tempFromLabel: "から:",
      tempToLabel: "へ:",
      tempValueLabel: "値:",
      tempResultTitle: "結果:"
    },
    zh: {
      title: "单位转换器",
      lengthTitle: "长度转换器",
      lengthFromLabel: "从:",
      lengthToLabel: "到:",
      lengthValueLabel: "值:",
      lengthResultTitle: "结果:",
      tempTitle: "温度转换器",
      tempFromLabel: "从:",
      tempToLabel: "到:",
      tempValueLabel: "值:",
      tempResultTitle: "结果:"
    },
    es: {
      title: "Convertidor de Unidades",
      lengthTitle: "Convertidor de Longitud",
      lengthFromLabel: "De:",
      lengthToLabel: "A:",
      lengthValueLabel: "Valor:",
      lengthResultTitle: "Resultado:",
      tempTitle: "Convertidor de Temperatura",
      tempFromLabel: "De:",
      tempToLabel: "A:",
      tempValueLabel: "Valor:",
      tempResultTitle: "Resultado:"
    },
    de: {
      title: "Einheitenumrechner",
      lengthTitle: "Längenumrechner",
      lengthFromLabel: "Von:",
      lengthToLabel: "Nach:",
      lengthValueLabel: "Wert:",
      lengthResultTitle: "Ergebnis:",
      tempTitle: "Temperaturumrechner",
      tempFromLabel: "Von:",
      tempToLabel: "Nach:",
      tempValueLabel: "Wert:",
      tempResultTitle: "Ergebnis:"
    }
  };

  function changeLanguage() {
    const lang = document.getElementById('language-select').value;
    document.getElementById('title').textContent = translations[lang].title;
    document.getElementById('length-title').textContent = translations[lang].lengthTitle;
    document.getElementById('length-from-label').textContent = translations[lang].lengthFromLabel;
    document.getElementById('length-to-label').textContent = translations[lang].lengthToLabel;
    document.getElementById('length-value-label').textContent = translations[lang].lengthValueLabel;
    document.getElementById('length-result-title').textContent = translations[lang].lengthResultTitle;
    document.getElementById('temp-title').textContent = translations[lang].tempTitle;
    document.getElementById('temp-from-label').textContent = translations[lang].tempFromLabel;
    document.getElementById('temp-to-label').textContent = translations[lang].tempToLabel;
    document.getElementById('temp-value-label').textContent = translations[lang].tempValueLabel;
    document.getElementById('temp-result-title').textContent = translations[lang].tempResultTitle;
  }

  // Length Conversion function
  function convertLength() {
    let fromUnit = document.getElementById('length-from').value;
    let toUnit = document.getElementById('length-to').value;
    let value = parseFloat(document.getElementById('length-value').value);
    let result;

    // Conversion rates relative to meters
    const conversionRates = {
      meters: 1,
      kilometers: 0.001,
      centimeters: 100,
      millimeters: 1000
    };

    // Convert the value to meters first
    let valueInMeters = value * conversionRates[fromUnit];

    // Then convert from meters to the target unit
    result = valueInMeters * conversionRates[toUnit];
    document.getElementById('length-result').textContent = result.toFixed(4);
  }

  // Temperature Conversion function
  function convertTemperature() {
    let fromUnit = document.getElementById('temp-from').value;
    let toUnit = document.getElementById('temp-to').value;
    let value = parseFloat(document.getElementById('temp-value').value);
    let result;

    if (fromUnit === toUnit) {
      result = value;
    } else if (fromUnit === 'C' && toUnit === 'F') {
      result = (value * 9/5) + 32;
    } else if (fromUnit === 'C' && toUnit === 'K') {
      result = value + 273.15;
    } else if (fromUnit === 'F' && toUnit === 'C') {
      result = (value - 32) * 5/9;
    } else if (fromUnit === 'F' && toUnit === 'K') {
      result = ((value - 32) * 5/9) + 273.15;
    } else if (fromUnit === 'K' && toUnit === 'C') {
      result = value - 273.15;
    } else if (fromUnit === 'K' && toUnit === 'F') {
      result = ((value - 273.15) * 9/5) + 32;
    }

    document.getElementById('temp-result').textContent = result.toFixed(4);
  }
</script>
</body>

</html>
